<template>
    <div>
        <div class="title">是否有上边距:</div>
        <div>
            <el-select v-model="tempValue.marginFlag" placeholder="请选择">
                <el-option
                        v-for="item in marginData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="title">选择活动:</div>
        <div>
            <el-select v-model="tempValue.isShowFlag" filterable placeholder="请选择活动" @change="handleIsShow">
                <div style="">
                    <div style="display: inline-block">
                        <el-input v-model="query.acTitle" placeholder="请输入内容" clearable></el-input>
                    </div>
                    <div style="display: inline-block">
                        <el-button type="primary" @click="searchBtn">搜索</el-button>
                    </div>
                </div>
                <el-option
                        v-for="item in isShowData"
                        :key="item.id"
                        :label="item.acTitle"
                        :value="item.id">
                </el-option>
                <div style="text-align:center">
                    <span class="text" v-show="selectPage!=1" @click.stop="prevePage">上一页</span>
                    <span class="text" style="padding-left: 30px;" @click.stop="nextPage" v-show="selectPage !=pageCount">
								下一页
							</span>
                </div>
            </el-select>
        </div>
        <div class="title" v-if="tempValue.isShowFlag!=''">活动标题:</div>
        <div style="font-size: 18px;font-weight: 500">
            {{tempValue.title}}
        </div>
        <div class="title" v-if="tempValue.isShowFlag!=''">展示形式:</div>
        <div v-if="tempValue.isShowFlag!=''">
            <el-select v-model="tempValue.flex" placeholder="请选择">
                <el-option
                        v-for="item in flexData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="title" v-if="tempValue.isShowFlag!=''">选择商品:</div>
        <div v-if="tempValue.isShowFlag!=''">
            <div v-for="(item,i) in tempValue.goodsList" class="goodsBox">
                <div>
                    <div class="imgBox">
                        <img :src="item.goodsMainPhotoUrl" width="40px" height="40px"/>
                    </div>
                    <div class="goodsName">{{item.goodsName}}</div>
                    <div class="btn"><el-button type="text" @click="delSel(item.id)">删除</el-button></div>
                </div>
            </div>
            <div class="btnChange">
                <el-button type="primary" @click="openGoods">
                    选择商品
                </el-button>
            </div>
        </div>
<!--        弹框组件-->
        <goodsPlaOrSel
                v-if="isDisplay"
                ref="goodsPlaOrSel"
                :ptOrMg="ptOrMg"
                :acId="acIdHD"
                @func="handleClose"
                @changeGoods="changeSel">
        </goodsPlaOrSel>
    </div>
</template>
<script>
    import goodsPlaOrSel from '../../components/goods-PlaOrSel/goods-PlaOrSel'
    //获取活动数据
    import {
        sellerActivityListAll
    } from "@/api/base/goods/seller/goods";
    import {mapState, mapGetters} from 'vuex'
    export default {
        name: "qkStoreActivityAttr",
        props: {
            prop: {
                type: Object,
                default() {
                    return {
                        goodsList:[],
                        marginFlag:'true',
                        title:"",
                        isShowFlag:'',
                        flex:"8",
                    }
                }
            }
        },
        components: {
            goodsPlaOrSel
        },
        data() {
            return {
                total: null, // 获取总数据量
                pageCount: null, // 获取总页数
                selectPage: 1, // 当前页数
                size:10,
                query:{
                    acTitle:''
                },
                acIdHD:'',
                tempValue: {},
                //    弹框受否显示
                isDisplay:false,
                ptOrMg:'hd',
                marginData:[{
                    value: 'true',
                    label: '是'
                },{
                    value: 'false',
                    label: '否'
                }],
                isShowData:[],
                flexData:[
                    {
                        value: '3',
                        label: '纵向带抢购按钮'
                    }, {
                        value: '4',
                        label: '纵向价格一排'
                    },
                    {
                        value: '8',
                        label: '横向4个单个单价格'
                    },
                ],
            }
        },
        methods:{
            update(){
                this.tempValue = JSON.parse(JSON.stringify(this.tempValue));
            },
            //搜索按钮
            searchBtn(){
                if(this.query.acTitle==""){
                    this.$message({
                        message: '请输入要搜索得活动名称',
                        type: 'error'
                    });
                }else{
                    this.selectPage=1
                    this.getAcList(this.selectPage,this.size,this.query)

                }
            },
            prevePage () {
                if (this.selectPage > 1) { // 判断点击的页数是否小于1
                    --this.selectPage ;
                };
                //发送请求
                this.getAcList(this.selectPage,this.size,this.query)
            },
            nextPage () {
                if (this.selectPage < this.pageCount) { // 判断点击的页数是否小于总页数;
                    ++this.selectPage;
                    this.getAcList(this.selectPage,this.size,this.query)

                }
            },
            //获取
            //选中得活动
            handleIsShow(val){
                this.acIdHD=val
                this.isShowData.forEach(item=>{
                    if(item.id==val){
                        this.tempValue.acIdHD=val
                        this.tempValue.title=item.acTitle
                    }
                })
            },
            //delSel
            //删除选中的商品
            delSel(id){
                let arr=[]
                this.tempValue.goodsList.forEach(item=>{
                    if(item.id!=id){
                        arr.push(item)
                    }
                })
                this.tempValue.goodsList=arr
                this.update()
                // this.$store.commit("setQKGoodList",this.tempValue.goodsList);
            },
            handleClose() {
                this.isDisplay = false;
            },
            //打开弹框
            openGoods(){
                let getAcIdHD=this.tempValue.acIdHD
                this.isShowData.forEach(item=>{
                    if(item.id==getAcIdHD){
                        this.tempValue.acIdHD=getAcIdHD
                        this.tempValue.title=item.acTitle
                        this.acIdHD=getAcIdHD
                    }
                })
				if(this.acIdHD!=''){
					this.isDisplay=true
					this.$nextTick(() => {
						this.$refs.goodsPlaOrSel.handleToggleIsShow(true);
					})
				}else{
					this.$message({
					    message: '该活动已结束，请选择其他活动',
					    type: 'error'
					});
				}
            },
            //    选中的商品
            changeSel(val){
                this.tempValue.goodsList = val.reduce((pre,current) => {
                    if(pre.findIndex(i => i.id === current.id) === -1) {
                        pre.push(current)
                    }
                    return pre;
                },[])
                this.update()
                // this.$store.commit("setQKGoodActivityList",val);
            },
        //   获取活动数据
            getAcList(page,size,query){
                sellerActivityListAll(page,size,query).then(res=>{
                    if(res.data.code==200){
                        this.isShowData=res.data.data
                        this.tempValue = this.prop;
                        let getAcIdHD=this.tempValue.acIdHD
                        this.isShowData.forEach(item=>{
                            if(item.id==getAcIdHD){
                                this.tempValue.isShowFlag=this.tempValue.title
                            }else{
                                this.tempValue.isShowFlag=this.tempValue.acIdHD
                            }
                        })

                        this.total = res.data.count; // 数据总数量
                        this.pageCount = Math.ceil(this.total / 10);
                    }

                })
            }
        },
        created() {
         // 获取店铺内得活动列表
            this.getAcList(this.selectPage,this.size,this.query)
        },
        mounted() {
            this.tempValue = this.prop;
            this.tempValue.isShowFlag=this.tempValue.title
        },
        watch: {
            prop(e){
                this.tempValue=e
            },
            tempValue: {
                handler(e){
                    this.$store.commit("updateActiveElementProp",e);
                },
            },
            deep:true
        }
    }
</script>

<style lang="scss" scoped>
    .arrt-eidt-wrapper{
        display: flex;
    .arrt-eidt-l{
        width: 108px;
    }
    .arrt-eidt-r{
        flex: 1;
    }
    }
    .title{
        vertical-align: middle;
        font-size: 14px;
        color: #606266;
        line-height: 40px;
        padding: 0 12px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .btnChange{
        width: 100%;
        .el-button{
            display: block;
            margin: 0px auto;
        }
    }
    .goodsBox{
        width: 100%;
        height: 40px;
        margin: 10px 0px;
        .imgBox{
            width: 20%;
            height: 40px;
            display: inline-block;
        }
        .goodsName{
            display: inline-block;
            width: 60%;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            margin: 0px 5px;
        }
        .btn{
            width: 10%;
            display: inline-block;
        }

    }
</style>